<template>
  <div>
    <div>
      <div>
        <div v-if="isSolo" style="width: 100vw">
          <div style="width: 100vw;height: 100vh">
            <div @click="switchSingleScreen(false)" style="height: 100%">
              <div class="videoAlt" v-show="videoList[0].extra.video === false">
                <el-image
                        :src="require('../../assets/videoStream/wutou.png')"
                        style="height: 100%;width: 10%"
                        alt="图片"
                        fit="contain"
                ></el-image>
              </div>
              <video
                      :id="videoList[0].video"
                      v-show="videoList[0].extra.video !== false"
                      autoplay="autoplay"
                      loop="loop"
                      style="background-color: #000000;width: 100%;height: 100%;"
              ></video>
            </div>
            <div
                    id="container-vr"
                    style="width: 100vw;height: calc(100vh - 40px);"
                    v-show="isVrDeveloped"
            ></div>
            <!--菜单-->
            <div class="btnListClass" v-if="orientation">
              <el-row>
                <el-row>
                  <el-col :span="18">
                    <div align="center">
                      <div>
                        <el-row>
                          <el-col :span="4">
                            <div class="btnShow">
                              <div>
                                <button
                                        class="btn-bitrate"
                                        @click="showSwitchBR()"
                                >
                                  {{ btnStatus.bitrateStatus }}
                                </button>
                              </div>
                              <div
                                      v-show="isShowSwitchBR"
                                      class="showSwitchBitClass"
                                      style="left: 10px"
                              >
                                <div style="margin: 20px 0  0 20px">
                                  <el-radio-group
                                          v-model="btnStatus.bitrateStatus"
                                  >
                                    <el-radio
                                            class="radioClass"
                                            :label="item.icon"
                                            v-for="item in constants.brList"
                                            :key="item.value"
                                            @change="switchBR(item.value)"
                                    >{{ item.label }}
                                    </el-radio>
                                  </el-radio-group>
                                </div>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              <!--开启文字消息-->
                              <div v-if="isShowMsgDrawer">
                                <button
                                        @click="isShowMsgDrawer = !isShowMsgDrawer"
                                        class="btn-message1"
                                ></button>
                              </div>
                              <div v-else>
                                <button
                                        @click="isShowMsgDrawer = !isShowMsgDrawer"
                                        class="btn-message"
                                ></button>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              <!--开启文件抽屉-->
                              <div v-if="isShowFileDrawer">
                                <button
                                        @click="isShowFileDrawer = !isShowFileDrawer"
                                        class="btn-file1"
                                ></button>
                              </div>
                              <div v-else>
                                <button
                                        @click="isShowFileDrawer = !isShowFileDrawer"
                                        class="btn-file"
                                ></button>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              ·
                              <!--关闭静音-->
                              <button
                                      @click="clickMike()"
                                      class="btn-mike"
                                      :style="{
                                  backgroundImage:
                                    'url(' + btnUiClass.mikeStyle + ')'
                                }"
                              ></button>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              <!--开关摄像头-->
                              <button
                                      @click="clickPublish()"
                                      class="btn-publish"
                                      :style="{
                                  backgroundImage:
                                    'url(' + btnUiClass.publishStyle + ')'
                                }"
                              ></button>
                            </div>
                          </el-col>
<!--                          <el-col :span="4">-->
<!--                            <div class="btnShow">-->
<!--                              <div class="div-switchLayout">-->
<!--                                <div v-if="isVrDeveloped">-->
<!--                                  <button-->
<!--                                          class="btn-vr"-->
<!--                                          @click="switchVrDeveloped()"-->
<!--                                  ></button>-->
<!--                                </div>-->
<!--                                <div v-else>-->
<!--                                  <button-->
<!--                                          class="btn-vr1"-->
<!--                                          @click="switchVrDeveloped()"-->
<!--                                  ></button>-->
<!--                                </div>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </el-col>-->
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div align="right">
                      <div class="div-quitConf" style="padding-right: 2vw">
                        <button
                                class="btn-quitConf"
                                @click="leaveRoom()"
                        ></button>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-row>
            </div>
            <!--菜单2-->
            <div class="btnListClass" v-else>
              <el-row>
                <el-row>
                  <el-col :span="20">
                    <div align="center">
                      <div>
                        <el-row>
                          <el-col :span="4">
                            <div class="btnShow">
                              <div>
                                <button
                                        class="btn-bitrate"
                                        @click="showSwitchBR()"
                                >
                                  {{ btnStatus.bitrateStatus }}
                                </button>
                              </div>
                              <div
                                      v-show="isShowSwitchBR"
                                      class="showSwitchBitClass"
                                      style="left: 10px"
                              >
                                <div style="margin: 20px 0  0 20px">
                                  <el-radio-group
                                          v-model="btnStatus.bitrateStatus">
                                    <el-radio
                                            class="radioClass"
                                            :label="item.icon"
                                            v-for="item in constants.brList"
                                            :key="item.value"
                                            @change="switchBR(item.value)"
                                    >{{ item.label }}
                                    </el-radio>
                                  </el-radio-group>
                                </div>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              <!--开启文字消息-->
                              <div v-if="isShowMsgDrawer">
                                <button
                                        @click="isShowMsgDrawer = !isShowMsgDrawer"
                                        class="btn-message1"
                                ></button>
                              </div>
                              <div v-else>
                                <button
                                        @click="isShowMsgDrawer = !isShowMsgDrawer"
                                        class="btn-message"
                                ></button>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              <!--开启文件抽屉-->
                              <div v-if="isShowFileDrawer">
                                <button
                                        @click="isShowFileDrawer = !isShowFileDrawer"
                                        class="btn-file1"
                                ></button>
                              </div>
                              <div v-else>
                                <button
                                        @click="isShowFileDrawer = !isShowFileDrawer"
                                        class="btn-file"
                                ></button>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              ·
                              <!--关闭静音-->
                              <button
                                      @click="clickMike()"
                                      class="btn-mike"
                                      :style="{
                                  backgroundImage:
                                    'url(' + btnUiClass.mikeStyle + ')'
                                }"
                              ></button>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="btnShow">
                              <!--开关摄像头-->
                              <button
                                      @click="clickPublish()"
                                      class="btn-publish"
                                      :style="{
                                  backgroundImage:
                                    'url(' + btnUiClass.publishStyle + ')'
                                }"
                              ></button>
                            </div>
                          </el-col>
<!--                          <el-col :span="4">-->
<!--                            <div class="btnShow">-->
<!--                              <div class="div-switchLayout">-->
<!--                                <div v-if="isVrDeveloped">-->
<!--                                  <button-->
<!--                                          class="btn-vr"-->
<!--                                          @click="switchVrDeveloped()"-->
<!--                                  ></button>-->
<!--                                </div>-->
<!--                                <div v-else>-->
<!--                                  <button-->
<!--                                          class="btn-vr1"-->
<!--                                          @click="switchVrDeveloped()"-->
<!--                                  ></button>-->
<!--                                </div>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </el-col>-->
                        </el-row>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div align="right">
                      <div class="div-quitConf" style="padding-right: 2vw">
                        <button
                                class="btn-quitConf"
                                @click="leaveRoom()"
                        ></button>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-row>
            </div>
          </div>
        </div>
        <div v-else style="width: 100vw">
          <div style="background-color: #E6E8E9;min-height: 100vh">
            <el-row>
              <el-col :span="24">
                <div style="width: 100%">
                  <div style="height: 40px;background-color: #313131;">
                    <div>
                      <p style="font-size: 16px;line-height: 40px;color: #fff">
                        {{
                        confInfo.description ? confInfo.description : roomId
                        }}
                      </p>
                    </div>
                  </div>
                  <div>
                    <!--一大多小-->
                    <div v-if="!equalLayout">
                      <div class="videoView1">
                        <el-row>
                          <!--大画面-->
                          <el-col :span="20">
                            <div>
                              <div>
                                <div
                                        @click="switchSingleScreen(true)"
                                        style="width: 100%;height:calc(100vh - 80px) "
                                >
                                  <div
                                          class="videoAlt"
                                          v-show="videoList[0].extra.video === false"
                                  >
                                    <el-image
                                            :src="
                                        require('../../assets/videoStream/wutou.png')
                                      "
                                            style="height: 100%;width: 10%"
                                            alt="图片"
                                            fit="contain"
                                    ></el-image>
                                  </div>
                                  <video
                                          :id="videoList[0].video"
                                          autoplay="autoplay"
                                          loop="loop"
                                          playsinline
                                          style="background-color: #131313;width: 100%;height: 100%;"
                                          :muted="
                                      videoList[0].video === 'localVideo'
                                        ? true
                                        : false
                                    "
                                          v-show="videoList[0].extra.video !== false"
                                  ></video>
                                  <div class="videoExtra">
                                    <el-row>
                                      <el-col :span="24" align="left">
                                        <div style="margin-left: 20px">
                                          <p style="line-height: 32px">
                                            {{ videoList[0].name }}
                                          </p>
                                        </div>
                                      </el-col>
                                      <!--<el-col :span="2" align="left" :offset="16">-->
                                      <!--<el-row>-->
                                      <!--<el-col :span="12">-->
                                      <!--<div-->
                                      <!--v-show="-->
                                      <!--videoList[0].extra.audio !== false-->
                                      <!--"-->
                                      <!--&gt;-->
                                      <!--<img-->
                                      <!--src="../../assets/videoStream/micro.png"-->
                                      <!--style="height: 20px"-->
                                      <!--alt="静音"-->
                                      <!--/>-->
                                      <!--</div>-->
                                      <!--<div-->
                                      <!--v-show="-->
                                      <!--videoList[0].extra.audio === false-->
                                      <!--"-->
                                      <!--&gt;-->
                                      <!--<img-->
                                      <!--src="../../assets/videoStream/micro1.png"-->
                                      <!--style="height: 20px"-->
                                      <!--alt="静音"-->
                                      <!--/>-->
                                      <!--</div>-->
                                      <!--</el-col>-->
                                      <!--<el-col :span="12">-->
                                      <!--<div-->
                                      <!--v-show="-->
                                      <!--videoList[0].extra.video !== false-->
                                      <!--"-->
                                      <!--&gt;-->
                                      <!--<img-->
                                      <!--src="../../assets/videoStream/camera1.png"-->
                                      <!--style="height: 20px"-->
                                      <!--alt="摄像头"-->
                                      <!--/>-->
                                      <!--</div>-->
                                      <!--<div-->
                                      <!--v-show="-->
                                      <!--videoList[0].extra.video === false-->
                                      <!--"-->
                                      <!--&gt;-->
                                      <!--<img-->
                                      <!--src="../../assets/videoStream/camera.png"-->
                                      <!--style="height: 20px"-->
                                      <!--alt="摄像头"-->
                                      <!--/>-->
                                      <!--</div>-->
                                      <!--</el-col>-->
                                      <!--</el-row>-->
                                      <!--</el-col>-->
                                    </el-row>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <!--小画面-->
                            <div align="center" class="div-videoList">
                              <el-row>
                                <div
                                        v-for="(item, index) in videoList.slice(1)"
                                        :key="item.video"
                                >
                                  <div
                                          style="height: calc(25vh - 20px);border: 1px solid #000;"
                                          @click="switchVideo(index)"
                                  >
                                    <div
                                            class="videoAlt"
                                            v-show="item.extra.video === false"
                                    >
                                      <el-image
                                              :src="
                                          require('../../assets/videoStream/wutou.png')
                                        "
                                              style="height: 100%;width: 30%"
                                              alt="图片"
                                              fit="contain"
                                      ></el-image>
                                    </div>
                                    <video
                                            :id="item.video"
                                            autoplay
                                            playsinline
                                            loop
                                            style="background-color: #131313;width: 100%;height: 100%"
                                            :muted="
                                        item.video === 'localVideo'
                                          ? true
                                          : false
                                      "
                                            v-show="item.extra.video !== false"
                                    ></video>
                                    <div
                                            class="videoExtra1"
                                            v-show="
                                        item.name !== null && item.name !== ''
                                      "
                                    >
                                      <el-row>
                                        <el-col :span="24" align="left">
                                          <p
                                                  style="font-size: 12px;margin-left: 5px"
                                          >
                                            {{ item.name }}
                                          </p>
                                        </el-col>
                                        <!--<el-col :span="8" align="left" :offset="10">-->
                                        <!--<el-row>-->
                                        <!--<el-col :span="10">-->
                                        <!--<div v-show="item.extra.audio !== false">-->
                                        <!--<img-->
                                        <!--src="../../assets/videoStream/micro.png"-->
                                        <!--style="height: 15px"-->
                                        <!--alt="静音"-->
                                        <!--/>-->
                                        <!--</div>-->
                                        <!--<div v-show="item.extra.audio === false">-->
                                        <!--<img-->
                                        <!--src="../../assets/videoStream/micro1.png"-->
                                        <!--style="height: 15px"-->
                                        <!--alt="静音"-->
                                        <!--/>-->
                                        <!--</div>-->
                                        <!--</el-col>-->
                                        <!--<el-col :span="14">-->
                                        <!--<div v-show="item.extra.video !== false">-->
                                        <!--<img-->
                                        <!--src="../../assets/videoStream/camera1.png"-->
                                        <!--style="height: 15px"-->
                                        <!--alt="摄像头"-->
                                        <!--/>-->
                                        <!--</div>-->
                                        <!--<div v-show="item.extra.video === false">-->
                                        <!--<img-->
                                        <!--src="../../assets/videoStream/camera.png"-->
                                        <!--style="height: 15px"-->
                                        <!--alt="摄像头"-->
                                        <!--/>-->
                                        <!--</div>-->
                                        <!--</el-col>-->
                                        <!--</el-row>-->
                                        <!--</el-col>-->
                                      </el-row>
                                    </div>
                                  </div>
                                </div>
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                    <!--等大-->
                    <div v-else>
                      <div>
                        <div>
                          <div class="videoView2">
                            <div
                                    v-for="(item, index) in videoList"
                                    :style="equalLayoutClass"
                                    class="videoDiv"
                                    v-show="index < confMemberNum"
                                    :key="item.video"
                                    @click="switchVideoAndFullScreen(index)"
                            >
                              <div
                                      class="videoAlt"
                                      v-show="item.extra.video === false"
                              >
                                <el-image
                                        :src="
                                    require('../../assets/videoStream/wutou.png')
                                  "
                                        style="height: 100%;width: 30%"
                                        alt="图片"
                                        fit="contain"
                                ></el-image>
                              </div>

                              <video
                                      :id="item.video"
                                      :muted="
                                  item.video === 'localVideo' ? true : false
                                "
                                      autoplay
                                      playsinline
                                      loop
                                      style="background-color: #131313;width: 100%;height: 100%"
                                      v-show="item.extra.video !== false"
                              ></video>
                              <div class="videoExtra">
                                <el-row>
                                  <el-col :span="24" align="left">
                                    <div style="margin-left: 20px">
                                      <p>
                                        {{ item.name }}
                                      </p>
                                    </div>
                                  </el-col>
                                  <!--<el-col :span="6" align="left" :offset="12">-->
                                  <!--<div style="margin-top: 5px">-->
                                  <!--<el-row>-->
                                  <!--<el-col :span="12">-->
                                  <!--<div v-show="item.extra.audio !== false">-->
                                  <!--<img-->
                                  <!--src="../../assets/videoStream/micro.png"-->
                                  <!--style="height: 20px"-->
                                  <!--alt="静音"-->
                                  <!--/>-->
                                  <!--</div>-->
                                  <!--<div v-show="item.extra.audio === false">-->
                                  <!--<img-->
                                  <!--src="../../assets/videoStream/micro1.png"-->
                                  <!--style="height: 20px"-->
                                  <!--alt="静音"-->
                                  <!--/>-->
                                  <!--</div>-->
                                  <!--</el-col>-->
                                  <!--<el-col :span="12">-->
                                  <!--<div v-show="item.extra.video !== false">-->
                                  <!--<img-->
                                  <!--src="../../assets/videoStream/camera1.png"-->
                                  <!--style="height: 20px"-->
                                  <!--alt="摄像头"-->
                                  <!--/>-->
                                  <!--</div>-->
                                  <!--<div v-show="item.extra.video === false">-->
                                  <!--<img-->
                                  <!--src="../../assets/videoStream/camera.png"-->
                                  <!--style="height: 20px"-->
                                  <!--alt="摄像头"-->
                                  <!--/>-->
                                  <!--</div>-->
                                  <!--</el-col>-->
                                  <!--</el-row>-->
                                  <!--</div>-->
                                  <!--</el-col>-->
                                </el-row>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!--菜单-->
                    <div
                            v-if="orientation"
                            style="width: 100%;background-color: #313131;height: 40px"
                    >
                      <div style="width: 100%;">
                        <el-row>
                          <el-col :span="18">
                            <div align="center">
                              <div>
                                <el-row align="center">
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <div>
                                        <button
                                                class="btn-bitrate"
                                                @click="showSwitchBit()"
                                        >
                                          {{ btnStatus.bitrateStatus }}
                                        </button>
                                      </div>
                                      <div
                                              v-show="isShowSwitchBit"
                                              class="showSwitchBitClass"
                                      >
                                        <div style="margin: 20px 0  0 20px">
                                          <el-radio-group
                                                  v-model="btnStatus.bitrateStatus"
                                          >
                                            <el-radio
                                                    :label="item.label"
                                                    class="radioClass"
                                                    v-for="item in bitrateList"
                                                    :key="item.label"
                                                    @change="switchBit(item.number)"
                                            >{{ item.content }}</el-radio
                                            >
                                          </el-radio-group>
                                        </div>
                                      </div>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--开启文字消息-->
                                      <div v-if="isShowMsgDrawer">
                                        <button
                                                @click="
                                            isShowMsgDrawer = !isShowMsgDrawer
                                          "
                                                class="btn-message1"
                                        ></button>
                                      </div>
                                      <div v-else>
                                        <button
                                                @click="
                                            isShowMsgDrawer = !isShowMsgDrawer
                                          "
                                                class="btn-message"
                                        ></button>
                                      </div>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--开启文件抽屉-->
                                      <div v-if="isShowFileDrawer">
                                        <button
                                                @click="
                                            isShowFileDrawer = !isShowFileDrawer
                                          "
                                                class="btn-file1"
                                        ></button>
                                      </div>
                                      <div v-else>
                                        <button
                                                @click="
                                            isShowFileDrawer = !isShowFileDrawer
                                          "
                                                class="btn-file"
                                        ></button>
                                      </div>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--关闭静音-->
                                      <button
                                              @click="clickMike()"
                                              class="btn-mike"
                                              :style="{
                                          backgroundImage:
                                            'url(' + btnUiClass.mikeStyle + ')'
                                        }"
                                      ></button>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--开关摄像头-->
                                      <button
                                              @click="clickPublish()"
                                              class="btn-publish"
                                              :style="{
                                          backgroundImage:
                                            'url(' +
                                            btnUiClass.publishStyle +
                                            ')'
                                        }"
                                      ></button>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <div class="div-switchLayout">
                                        <!--切换布局模式-->
                                        <button
                                                @click="switchLayout()"
                                                class="btn-switchLayout"
                                                :style="{
                                            backgroundImage:
                                              'url(' +
                                              btnUiClass.switchLayoutStyle +
                                              ')'
                                          }"
                                        ></button>
                                      </div>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div align="right">
                              <div
                                      class="div-quitConf"
                                      style="padding-right: 2vw"
                              >
                                <button
                                        class="btn-quitConf"
                                        @click="leaveRoom()"
                                ></button>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                    <!--菜单-->
                    <div
                            style="width: 100%;background-color: #313131;height: 40px"
                            v-else
                    >
                      <div style="width: 100%;">
                        <el-row>
                          <el-col :span="20">
                            <div align="center">
                              <div>
                                <el-row align="center">
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <div>
                                        <button
                                                class="btn-bitrate"
                                                @click="showSwitchBit()"
                                        >
                                          {{ btnStatus.bitrateStatus }}
                                        </button>
                                      </div>
                                      <div
                                              v-show="isShowSwitchBit"
                                              class="showSwitchBitClass"
                                      >
                                        <div style="margin: 20px 0  0 20px">
                                          <el-radio-group
                                                  v-model="btnStatus.bitrateStatus"
                                          >
                                            <el-radio
                                                    :label="item.label"
                                                    class="radioClass"
                                                    v-for="item in bitrateList"
                                                    :key="item.label"
                                                    @change="switchBit(item.number)"
                                            >{{ item.content }}</el-radio
                                            >
                                          </el-radio-group>
                                        </div>
                                      </div>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--开启文字消息-->
                                      <div v-if="isShowMsgDrawer">
                                        <button
                                                @click="
                                            isShowMsgDrawer = !isShowMsgDrawer
                                          "
                                                class="btn-message1"
                                        ></button>
                                      </div>
                                      <div v-else>
                                        <button
                                                @click="
                                            isShowMsgDrawer = !isShowMsgDrawer
                                          "
                                                class="btn-message"
                                        ></button>
                                      </div>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--开启文件抽屉-->
                                      <div v-if="isShowFileDrawer">
                                        <button
                                                @click="
                                            isShowFileDrawer = !isShowFileDrawer
                                          "
                                                class="btn-file1"
                                        ></button>
                                      </div>
                                      <div v-else>
                                        <button
                                                @click="
                                            isShowFileDrawer = !isShowFileDrawer
                                          "
                                                class="btn-file"
                                        ></button>
                                      </div>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--关闭静音-->
                                      <button
                                              @click="clickMike()"
                                              class="btn-mike"
                                              :style="{
                                          backgroundImage:
                                            'url(' + btnUiClass.mikeStyle + ')'
                                        }"
                                      ></button>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <!--开关摄像头-->
                                      <button
                                              @click="clickPublish()"
                                              class="btn-publish"
                                              :style="{
                                          backgroundImage:
                                            'url(' +
                                            btnUiClass.publishStyle +
                                            ')'
                                        }"
                                      ></button>
                                    </div>
                                  </el-col>
                                  <el-col :span="4">
                                    <div class="btnShow">
                                      <div class="div-switchLayout">
                                        <!--切换布局模式-->
                                        <button
                                                @click="switchLayout()"
                                                class="btn-switchLayout"
                                                :style="{
                                            backgroundImage:
                                              'url(' +
                                              btnUiClass.switchLayoutStyle +
                                              ')'
                                          }"
                                        ></button>
                                      </div>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div align="center">
                              <div class="div-quitConf">
                                <button
                                        class="btn-quitConf"
                                        @click="leaveRoom()"
                                ></button>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-drawer
                :visible.sync="isShowMsgDrawer"
                direction="ltr"
                :with-header="false"
                size="50%"
        >
          <div class="msg-drawer">
            <div>
              <div style="height: 40px">
                <div>
                  <p style="line-height: 40px">
                    会议聊天
                  </p>
                </div>
              </div>
              <div style="height: calc(100vh - 80px);">
                <div style="height: calc(100vh - 80px);" class="msgContentList">
                  <div v-if="msgList.length === 0">
                    <div style="padding-top: 20vh">
                      <img
                              src="../../assets/videoStream/wuxiaoxi.png"
                              style="width: 100px;height: 85px"
                              alt="无文字消息"
                      />
                    </div>
                    <div
                            style="padding-top: 20px;color: #d3d3d3;font-size: 12px"
                    >
                      <p>暂无文字消息</p>
                    </div>
                  </div>
                  <div>
                    <div v-for="(item, index) in msgList" :key="index">
                      <div v-if="item.name !== name" style="padding: 10px">
                        <el-row>
                          <el-col :span="24" align="left"
                          ><div class="icon-user-left">
                            <p style="line-height: 30px;text-align: left">
                              {{ item.name }}
                            </p>
                          </div>
                            <div
                                    style="text-align: left;background-color: #ACACAC;display:inline-block;margin-left: 2vw"
                                    class="msgContentClass"
                            >
                              <p
                                      style="word-break:break-word;color: #FFF;display:inline-block;"
                              >
                                {{ item.content }}
                              </p>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                      <div v-else style="padding: 10px">
                        <el-row>
                          <el-col :span="24" align="right">
                            <div class="icon-user-right">
                              <p style="line-height: 30px">
                                {{ item.name }}
                              </p>
                            </div>
                            <div
                                    style="text-align: left;background-color: #2992FD;margin-right: 2vw"
                                    class="msgContentClass"
                            >
                              <p
                                      style="word-break:break-word;color: #FFF;display:inline-block;"
                              >
                                {{ item.content }}
                              </p>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <el-row>
                    <el-col :span="18" align="left">
                      <div style="padding: 0 0 0 2vw">
                        <input
                                v-model="sendMsgContent"
                                placeholder="请输入文本消息"
                                maxlength="50"
                                style="padding-left: 8px;width: 100%"
                                class="input-msg"
                        />
                      </div>
                    </el-col>
                    <el-col :span="6" align="left">
                      <div style="padding: 0 0 0 1vw">
                        <button @click="sendMsg()" class="btn-msg"></button>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
        <el-drawer
                :visible.sync="isShowFileDrawer"
                direction="ltr"
                :with-header="false"
                size="50%"
        >
          <el-row>
            <el-col :span="24" align="center">
              <div style="width:100%" class="msg-drawer">
                <div>
                  <div style="height: 40px">
                    <el-row>
                      <el-col :span="8">
                        <el-upload
                                :on-change="handleUploadChange"
                                :auto-upload="false"
                                :show-file-list="false"
                                action="#"
                                :accept="fileType"
                                ref="upload"
                        >
                          <button class="btn-upload"></button>
                        </el-upload>
                      </el-col>
                      <el-col :span="8">
                        <p style="line-height: 40px">
                          会议文件
                        </p>
                      </el-col>
                      <el-col :span="8"></el-col>
                    </el-row>
                  </div>
                  <div>
                    <div class="fileListClass">
                      <div v-if="fileList.length === 0">
                        <div style="padding-top: 20vh">
                          <img
                                  src="../../assets/videoStream/wuxiaoxi.png"
                                  style="width: 100px;height: 85px"
                          />
                        </div>
                        <div
                                style="padding-top: 20px;color: #d3d3d3;font-size: 12px"
                        >
                          <p>暂无会议文件</p>
                        </div>
                      </div>
                      <div v-else>
                        <div v-for="item in fileList" :key="item.id">
                          <el-row>
                            <el-col :span="4">
                              <!--{{ item.fileType }}-->
                              <img
                                      :src="fileIconList[item.fileType]"
                                      style="height:20px;margin-top: 10px"
                              />
                            </el-col>
                            <el-col :span="15" align="left">
                              <div
                                      style="width: 30vw;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;"
                              >
                                <p
                                        style="line-height: 40px;text-align: left;font-size: 12px"
                                >
                                  {{ item.fileName }}
                                </p>
                              </div>
                            </el-col>
                            <el-col :span="5">
                              <button
                                      @click="downFile(item.fileUrl)"
                                      class="btn-down"
                              ></button>
                              <!--<el-button-->
                              <!--@click="deleteFile(item.id)"-->
                              <!--:disabled="item.createBy !== name"-->
                              <!--&gt;-->
                              <!--删除-->
                              <!--</el-button>-->
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
  import dengda from "@/assets/videoStream/sifenping2.png";
  import yida from "@/assets/videoStream/duoping.png";
  import publishOff from "@/assets/videoStream/shexiangtou.png";
  import publishOn from "@/assets/videoStream/shexiangtou1.png";
  import mikeOn from "@/assets/videoStream/jngyin1.png";
  import mikeOff from "@/assets/videoStream/jingyin.png";
  import shareScreenOn from "@/assets/videoStream/gongxiang1.png";
  import shareScreenOff from "@/assets/videoStream/gongxiang.png";

  import * as THREE from "../../../public/js/three.js";
  import { VR } from "../../../public/js/mxreality.js";
  let vr;
  let container;
  let renderer;

  const tvvsdk_constants = require("../../../public/js/sdk/tvvsdk_constants.js");

  let tvvssdk;
  let MLog = "MLog************************************";
  let TAG = "VideoStream---------";
  let qosIntervalId = -1;
  let roomIntervalId = -1;

  export default {
    name: "VideoStream",
    data() {
      return {
        roomId: "",
        name: "",
        tag: "videostream",
        osName: "",
        platform: 5,
        orientation: false, // true橫屏 false竖屏
        userList: [],
        confMemberNum: 0,
        deviceInfo: [],
        confInfo: { description: "默认" },
        videoList: [
          {
            video: "video0",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video1",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video2",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video3",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video4",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video5",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video6",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video7",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          },
          {
            video: "video8",
            stream: null,
            name: "",
            index: "",
            show: false,
            extra: {}
          }
        ],
        isFullScreen: false,
        isSolo: true,
        equalLayout: true,
        equalLayoutClass: {
          width: "33.33%",
          height: "calc(33.33% - 4px)"
        },
        isShowSwitchBR: false,
        btnStatus: {
          switchLayoutStatus: false,
          publishStatus: true,
          mikeStatus: true,
          shareScreenStatus: false,
          bitrateStatus: "标"
        },
        btnUiClass: {
          switchLayoutStyle: dengda,
          publishStyle: publishOff,
          mikeStyle: mikeOff,
          shareScreenStyle: shareScreenOff
        },

        tabsHeight: "calc(100vh - 101px)", // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
        tabsMsgHeight: "calc(100vh - 150px)", // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
        activeTabs: "2",
        msgList: [],
        sendMsgContent: "",
        fileIconList: {
          pdf: require("../../assets/fileIcon/pdf.png"),
          jpg: require("../../assets/fileIcon/img.png"),
          png: require("../../assets/fileIcon/img.png"),
          jpeg: require("../../assets/fileIcon/img.png"),
          gif: require("../../assets/fileIcon/img.png"),
          mp4: require("../../assets/fileIcon/video.png"),
          "3gp": require("../../assets/fileIcon/video.png"),
          mav: require("../../assets/fileIcon/video.png"),
          doc: require("../../assets/fileIcon/word.png"),
          docx: require("../../assets/fileIcon/word.png"),
          ppt: require("../../assets/fileIcon/ppt.png")
        },
        fileType:
                ".doc,.docx,.pdf,.png,.jpg,.jpeg,.bpm,.gif,.svg,.wbp,.mp4,.mav,.rmvb,.rm,.flv,.3gp,.ppt,.pptx",
        uploadFiles: "",
        uploadFileName: "",
        fileList: [],
        newMsg: false,
        newFile: false,
        fullscreenHeight: "",
        fullscreenWidth: "",
        isVrDeveloped: false,
        isShowMsgDrawer: false,
        isShowFileDrawer: false,
        constants: tvvsdk_constants
      };
    },

    created() {
      let _this = this;
      tvvssdk = this.$tvvssdk;

      if (this.$route.query.roomId) {
        this.roomId = this.$route.query.roomId;
      } else {
        alert("房间号不存在");
        this.goHome();
        return;
      }
      if (this.$route.query.name !== undefined && this.$route.query.name !== null) {
        this.name = this.$route.query.name.toString();
      } else {
        alert("用户名不存在");
        this.goHome();
        return;
      }

      _this.$store.dispatch("DeviceInfo");
      _this.deviceInfo = _this.$store.state.deviceInfo;

      let options = {
        audio: {},   //音频参数
        video: {},   //视频参数
        mode: this.deviceInfo.confmode,
        data: false  //暂不支持
      };

      if(this.deviceInfo.confmode === tvvsdk_constants.confModeList[0].value ||
              this.deviceInfo.confmode === tvvsdk_constants.confModeList[1].value){
        this.isSolo = true;  //mcu 单窗口
      }else{
        this.isSolo = false; //sfu 多窗口
      }


      //装配初始化sdk参数
      options.audio.audiosend = this.deviceInfo.microphone !== "0";
      options.audio.audioindeviceid = this.deviceInfo.microphone;

      options.audio.audiorecv = this.deviceInfo.speaker !== "0";
      options.audio.audiooutdeviceid = this.deviceInfo.speaker;

      options.video.videosend = this.deviceInfo.camera !== "0";
      options.video.videorecv = true;
      options.video.deviceid = this.deviceInfo.camera;
      options.video.size = this.deviceInfo.size;
      options.video.fps = this.deviceInfo.fps;

      options.video.confsize = this.deviceInfo.confsize;
      options.video.confminbr = this.deviceInfo.confminbr;
      options.video.confmaxbr = this.deviceInfo.confmaxbr;
      options.video.conffps = this.deviceInfo.conffps;

      if (this.deviceInfo.camera === "-1")
        options.video.type = "screen";
      else
        options.video.type = "camera";


      tvvsdk_constants.resList.forEach(function (res, index, arr) {
        if (_this.deviceInfo.size === res.value) {
          _this.btnStatus.sizeStatus = res.icon;
        }
      });

      tvvsdk_constants.brList.forEach(function (br, index, arr) {
        if (_this.deviceInfo.maxbr === br.value) {
          _this.btnStatus.bitrateStatus = br.icon;
        }
      });

      tvvsdk_constants.resList.forEach(function (res, index, arr) {
        if (_this.deviceInfo.confsize === res.value) {
          _this.btnStatus.confSizeStatus = res.icon;
          _this.confSize = res.value;
        }
      });

      tvvsdk_constants.brList.forEach(function (br, index, arr) {
        if (_this.deviceInfo.confmaxbr === br.value) {
          _this.btnStatus.confBitrateStatus = br.icon;
          _this.confBr = br.value;
        }
      });

      tvvsdk_constants.fpsList.forEach(function (fps, index, arr) {
        if (_this.deviceInfo.conffps === fps.value) {
          _this.btnStatus.confFPSStatus = fps.icon;
          _this.confFPS = fps.value;
        }
      });
        //PC端

        if (_this.osName === "Android") {
          _this.platform = 1;
          options.platform = 1;
        } else if (_this.osName === "iOS") {
          _this.platform = 3;
          options.platform = 3;
        }
      tvvssdk.init(options, function (res) {
        if (res.success) {
          tvvssdk.createConnection(function (res) {
            if (res.success) {
              _this.joinRoom(_this.roomId, _this.name);
              _this.startQueryRoom(_this.roomId, _this.name);
            } else {
              alert(res.msg);
            }
          });
        } else {
          alert(res.msg);
        }
      });
      // this.initOrientation();
    },

    mounted() {
      if (window.history && window.history.pushState) {
        // 向历史记录中插入了当前页
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", this.goBack, false);
      }
      // window.addEventListener("resize", this.initOrientation, false);
      // this.queryFiles();
      // this.getSender();
    },
    beforeDestroy() {
      // 移除监听
      // window.removeEventListener("resize", this.initOrientation, false);
    },
    destroyed() {
      window.removeEventListener("popstate", this.goBack, false);
    },
    methods: {
      test(e) {
        console.log(e);
      },
      goBack() {
        tvvssdk.leaveRoom();
        sessionStorage.clear();
        window.history.back();
      },
      // 自己加入会议，接收SDK的回调
      joinRoom(roomId, name) {
        let _this = this;
        let callbacks = {
          onlocalstream: function(stream, extra) {
            console.log(MLog);
            let index = 1;
            let localVideo = document.getElementById(_this.videoList[index].video)

            _this.videoList[index].stream = stream;
            _this.videoList[index].index = index;
            _this.videoList[index].name = _this.name;
            _this.videoList[index].show = true;
            _this.videoList[index].extra = {
              audio: extra.audio,
              video: extra.video,
              platform: _this.platform
            };
            console.log(TAG, _this.videoList);
            console.log(TAG, "local渲染Video");
            _this.getConfMemberNum();
          },
          onremotestream: function (stream, extra) {
            console.log(TAG, "onremotestream");
            let index = 0;
            _this.videoList[index].stream = stream;
            _this.videoList[index].index = index;
            _this.videoList[index].name = "会场";
            _this.videoList[index].show = true;
            _this.videoList[index].extra = extra;
            _this.getConfMemberNum();
            setTimeout(function () {
              _this.reloadIndexStream(index);
            }, 200);
          },

          onleave: function(name, rfindex) {
            _this.queryConfMemberInfo();
            if (rfindex !== 0) {
              _this.leaveVideo(name, rfindex);
            }
          },
          ondata: function(sender, platform, data) {
            console.log(MLog);
            console.log(data);
            if (data.operation === "text") {
              _this.addMsgList(sender, data.data.content);
            } else if (data.operation === "file") {
              _this.newFile = true;
              _this.queryFiles();
            }
          }
        };
        tvvssdk.joinRoom(roomId, name, callbacks);
      },


      // 重新渲染指定index画面，用于全屏
      reloadIndexStream(index) {
        tvvssdk.attachMediaStream(
                document.getElementById(this.videoList[index].video),
                this.videoList[index].stream
        );
        let remoteVideo = document.getElementById(this.videoList[index].video);
        if (remoteVideo.setSinkId) {
          let outputAudioId = this.deviceInfo.speaker;
          if (outputAudioId !== "0") {
            remoteVideo.setSinkId(outputAudioId);
            remoteVideo.muted = false;
          } else {
            remoteVideo.muted = true;
          }
        }
      },

      goHome() {
        this.$router.push({
          name: "mHome"
        });
      },
      logoutPage() {
        this.leaveRoom();
        this.$store.dispatch("UserLogout");
        this.$router.push({
          path: "/"
        });
      },
      // 主流程
      // 获取sender
      getSender() {
        this.$store.dispatch("Sender");
        this.sender = this.$store.state.sender;
        if (this.sender !== null) {
          this.queryConfMemberInfo();
          this.queryConfInfo();
        } else {
          this.$message.error("账号信息异常，请重新登陆");
        }
      },
      queryConfInfo() {
        let url = "/rtc/queryConfInfo/?room=";
        let params = {};
        this.axios.hGet(url + this.roomId, params, response => {
          this.confInfo = response.data;
        });
      },
      // 获取会议成员
      queryConfMemberInfo() {
        let url = "/rtc/queryConfMemberInfo2/";
        let params = {
          room: this.roomId,
          sender: this.sender
        };
        this.axios.hPost(url, params, response => {
          this.userList = response.data.userlist;
        });
      },

      startQueryRoom(roomid, name){
        let _this = this;
        if (roomIntervalId !== -1) {
          window.clearInterval(roomIntervalId);
          roomIntervalId = -1;
        }
        roomIntervalId = window.setInterval(() => {
          tvvssdk.queryRoom(roomid, name, {
            success: function(result) {
              //console.log(TAG, "queryConfMemberInfo succ:"+result);
              _this.userList.length = 0;
              if(roomid === result.room){
                result.participants.forEach(function (p, index, arr){
                  let user = {"userName": p.display, "position": p.position, "id": p.id};
                  _this.userList.push(user);
                });
              }
            },
            error: function(msg) {
              console.log(TAG, "queryConfMemberInfo error:"+msg);
            }
          });
        }, 1500);

      },

      getConfMemberNum() {
        console.log(TAG, "this.confMemberNum");
        this.confMemberNum = 0;
        for (let index in this.videoList) {
          console.log(TAG, this.videoList[index]);
          if (
                  this.videoList[index].name !== null &&
                  this.videoList[index].name !== ""
          ) {
            this.confMemberNum = this.confMemberNum + 1;
          }
        }
        // this.removeNullVideo();
      },
      // 加入后渲染画面
      joinVideo(stream, rfindex, name, extra) {
        let _this = this;
        this.queryConfMemberInfo();
        //设置扬声器
        let remoteVideo = document.getElementById("remotevideo" + rfindex);
        if (remoteVideo) {
          if (remoteVideo.setSinkId) {
            let outputAudioId = _this.deviceInfo.speaker;
            remoteVideo.setSinkId(outputAudioId);
          }
        }

        console.log(this.tag, "onremotestream rfindex=" + rfindex);
        let index = this.getVideoListIndexByRemoteIndex("remotevideo" + rfindex);
        this.videoList[index].stream = stream;
        this.videoList[index].index = rfindex;
        this.videoList[index].name = name;
        this.videoList[index].extra = extra;
        console.log(MLog);
        console.log("加入后渲染画面");
        console.log(this.videoList);
        console.log(this.confMemberNum);
        _this.getConfMemberNum();
        setTimeout(this.reloadStream, 200);
      },
      // 根据视频流的index获取该流在视频中的位置
      getVideoListIndexByRemoteIndex(remoteIndex) {
        let i;
        for (i in this.videoList) {
          if (remoteIndex === this.videoList[i].video) {
            return i;
          }
        }
      },
      // 根据视频流的index获取该流在视频中的位置
      getVideoListIndexByUserName(username, platform) {
        console.log(username);
        console.log(platform);
        let i;
        for (i in this.videoList) {
          console.log(
                  username === this.videoList[i].name &&
                  String(platform) === String(this.videoList[i].extra.platform)
          );
          if (
                  username === this.videoList[i].name &&
                  String(platform) === String(this.videoList[i].extra.platform)
          ) {
            console.log(i);
            return i;
          }
        }
      },

      // 有人离开，重新渲染
      leaveVideo(name, rfindex) {
        // this.queryConfMemberInfo();
        console.log(MLog);
        console.log("离开后渲染画面");
        // console.log(this.tag, "onleave name=" + name + ",index=" + rfindex);
        // 判断移除的画面在什么位置
        let n = this.getVideoListIndexByRemoteIndex("remotevideo" + rfindex);
        this.videoList[n].stream = null;
        this.videoList[n].index = "";
        this.videoList[n].name = "";
        this.videoList[n].extra = {};
        while (n < 8) {
          if (this.videoList[parseInt(n) + 1].stream !== null) {
            this.switchData(this.videoList[n], this.videoList[parseInt(n) + 1]);
          } else {
            break;
          }
          n++;
        }
        console.log(this.videoList);
        console.log(this.confMemberNum);
        this.getConfMemberNum();
        setTimeout(this.reloadStream, 500);
      },
      removeNullVideo() {
        let index = 8;
        while (index > 0) {
          if (
                  this.videoList[index].name !== "" &&
                  this.videoList[index - 1].name === ""
          ) {
            this.switchData(this.videoList[index], this.videoList[index - 1]);
          }
          index--;
        }
      },
      // 两两更换数据
      switchData(beforeList, afterList) {
        let beforeStream = beforeList.stream;
        let beforeIndex = beforeList.index;
        let beforeName = beforeList.name;
        let beforeVideo = beforeList.video;
        let beforeExtra = beforeList.extra;
        let afterStream = afterList.stream;
        let afterIndex = afterList.index;
        let afterName = afterList.name;
        let afterVideo = afterList.video;
        let afterExtra = afterList.extra;
        beforeList.stream = afterStream;
        beforeList.index = afterIndex;
        beforeList.name = afterName;
        beforeList.video = afterVideo;
        beforeList.extra = afterExtra;
        afterList.stream = beforeStream;
        afterList.index = beforeIndex;
        afterList.name = beforeName;
        afterList.video = beforeVideo;
        afterList.extra = beforeExtra;
      },
      // 一大多小模式切换画面到大画面
      switchVideo(index) {
        if (this.videoList[index + 1].stream !== null) {
          this.switchData(this.videoList[0], this.videoList[index + 1]);
          console.log(MLog);
          console.log(this.videoList);
          setTimeout(this.reloadStream, 200);
        }
      },
      // 主功能
      // 切換佈局
      switchLayout() {
        this.equalLayout = !this.equalLayout;
        this.btnStatus.switchLayoutStatus = !this.btnStatus.switchLayoutStatus;
        if (this.equalLayout) {
          this.tabsHeight = "calc(100vh - 101px)"; // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
          this.tabsMsgHeight = "calc(100vh - 150px)"; // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
        } else {
          this.tabsHeight = "calc(100vh - 101px)"; // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
          this.tabsMsgHeight = "calc(100vh - 150px)"; // 初始化的高度和equalLayout对应，equalLayout为true为760.否则为860
        }
        this.btnUiShow();
        setTimeout(this.reloadStream, 300);
      },
      // 重新渲染画面
      reloadStream() {
        let i;
        for (i in this.videoList) {
          tvvssdk.attachMediaStream(
                  document.getElementById(this.videoList[i].video),
                  this.videoList[i].stream
          );
        }
      },
      // 重新渲染第一个画面，用于全屏
      reloadOneStream() {
        tvvssdk.attachMediaStream(
                document.getElementById(this.videoList[0].video),
                this.videoList[0].stream
        );
      },

      // 等大情況下动态调整video大小
      dynamicLayout() {
        console.log(MLog + "/n" + this.confMemberNum);
        // this.confMemberNum = 9;
        // this.userList.length=9
        if (this.confMemberNum === 1) {
          this.equalLayoutClass = {
            width: "100%",
            // height: "calc(100vh - 144px)"
            height: "calc(100% - 2px)"
          };
        } else if (this.confMemberNum === 2) {
          this.equalLayoutClass = {
            width: "50%",
            height: "calc(100% - 2px)"
          };
        } else if (this.confMemberNum === 3 || this.confMemberNum === 4) {
          this.equalLayoutClass = {
            width: "50%",
            height: "calc(50% - 4px)"
          };
        } else if (this.confMemberNum === 5 || this.confMemberNum === 6) {
          this.equalLayoutClass = {
            width: "33.33%",
            height: "calc(50% - 4px)"
          };
        } else if (this.confMemberNum === 7 || this.confMemberNum === 8) {
          this.equalLayoutClass = {
            width: "25%",
            height: "calc(50% - 4px)"
          };
        } else {
          this.equalLayoutClass = {
            width: "33.33%",
            height: "calc(33.33% - 4px)"
          };
        }
      },
      switchVideoAndFullScreen(index) {
        if (index !== 0) {
          if (this.videoList[index].stream !== null) {
            this.switchData(this.videoList[0], this.videoList[index]);
          }
        }
        this.reloadStream();
        this.clickSwitchFullScreen(true);
      },

      // 菜单
      // 离开房间
      leaveRoom() {
        tvvssdk.leaveRoom();
        this.goHome();
      },
      // 菜单UI变化
      // setVideoStatus(username, platform, status) {
      //   let index = this.getVideoListIndexByUserName(username, platform);
      //   console.log(index);
      //   console.log(this.videoList[index]);
      //   this.videoList[index].extra.video = status;
      // },
      // setAudioStatus(username, platform, status) {
      //   let index = this.getVideoListIndexByUserName(username, platform);
      //   this.videoList[index].extra.audio = status;
      // },
      btnUiShow() {
        if (this.btnStatus.switchLayoutStatus) {
          this.btnUiClass.switchLayoutStyle = yida;
        } else {
          this.btnUiClass.switchLayoutStyle = dengda;
        }
        if (this.btnStatus.publishStatus) {
          this.btnUiClass.publishStyle = publishOff;
        } else {
          this.btnUiClass.publishStyle = publishOn;
        }

        if (this.btnStatus.mikeStatus) {
          this.btnUiClass.mikeStyle = mikeOff;
        } else {
          this.btnUiClass.mikeStyle = mikeOn;
        }
        if (this.btnStatus.shareScreenStatus) {
          this.btnUiClass.shareScreenStyle = shareScreenOn;
        } else {
          this.btnUiClass.shareScreenStyle = shareScreenOff;
        }
      },
      // 本地码率选择dialog
      showSwitchBR() {
        this.isShowSwitchBR = !this.isShowSwitchBR;
      },
      // 设置本地最大码率
      switchBR(br) {
        this.isShowSwitchBR = false;
        let _this = this;
        tvvssdk.setBitrate(br, function (res) {
          if (res.success) {
            _this.$message.warning("本地码率设置成功");
            console.log(TAG, res);
          } else {
            _this.$message.warning("本地码率设置失败");
          }
        });
      },

      // 开关麦克风
      clickMike() {
        let _this = this;
        this.btnStatus.mikeStatus = !this.btnStatus.mikeStatus;
        let enable = this.btnStatus.mikeStatus;
        tvvssdk.mike(enable, function(res) {
          if (res.success) {
            _this.btnUiShow();
            // _this.setAudioStatus(_this.name, "5", enable);
          }
          console.log(res);
        });
      },
      // 开关摄像头
      clickPublish() {
        let _this = this;
        this.btnStatus.publishStatus = !this.btnStatus.publishStatus;
        let enable = this.btnStatus.publishStatus;
        console.log(MLog);
        console.log(this.videoList);
        tvvssdk.publish(enable, function(res) {
          if (res.success) {
            _this.btnUiShow();
            // _this.setVideoStatus(_this.name, "5", enable);
          }
          console.log(res);
        });
      },
      // 共享屏幕
      shareScreen() {
        let _this = this;
        this.btnStatus.shareScreenStatus = !this.btnStatus.shareScreenStatus;
        let enable = this.btnStatus.shareScreenStatus;
        tvvssdk.shareScreen(enable, function(res) {
          if (res.success) {
            _this.btnUiShow();
          }
          console.log(_this.tag, res);
        });
      },
      switchSingleScreen(status) {
        // this.clickSwitchFullScreen(status);
        this.isSingle = status;
        if (status) {
          setTimeout(this.reloadOneStream, 200);
        } else {
          setTimeout(this.reloadStream, 200);
        }
      },
      // 切换全屏
      clickSwitchFullScreen(status) {
        if (status) {
          this.isFullScreen = false;
          this.switchFullScreen();
        } else {
          this.isFullScreen = true;
          this.switchFullScreen();
        }
      },
      // 全屏
      switchFullScreen() {
        var element = document.documentElement;
        this.isFullScreen = !this.isFullScreen;
        if (this.isFullScreen) {
          // 判断浏览器设备类型
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.mozRequestFullScreen) {
            // 兼容火狐
            element.mozRequestFullScreen();
          } else if (element.webkitRequestFullscreen) {
            // 兼容谷歌
            element.webkitRequestFullscreen();
          } else if (element.msRequestFullscreen) {
            // 兼容IE
            element.msRequestFullscreen();
          }
          setTimeout(this.reloadOneStream, 50);
        } else {
          // $('body').removeClass('full-screen');
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          console.log(MLog);
          console.log(this.videoList);
          setTimeout(this.reloadStream, 200);
        }
      },
      //右侧功能
      // 发送文字消息
      sendMsg() {
        let _this = this;
        if (this.sendMsgContent.trim() === "" || this.sendMsgContent === null) {
          return;
        }
        let content = {
          data: {
            content: this.sendMsgContent
          },
          operation: "text"
        };
        tvvssdk.sendGroupData(this.name, content, function(res) {
          if (res.success) {
            // _this.$message.success("发送文字消息成功");
            _this.addMsgList(_this.name, _this.sendMsgContent);
            // 临时注销
            _this.sendMsgContent = "";
          }
          console.log(res);
        });
      },
      // 群发上传文件的消息
      sendUploadFileMsg(data) {
        // let _this = this;
        tvvssdk.sendGroupData(this.name, data, function(res) {
          if (res.success) {
            // _this.$message.success("发送上传文件消息成功");
          }
        });
      },
      // 下载文件
      downFile(url) {
        // let elemIF = document.createElement("iframe");
        // elemIF.src = url;
        // elemIF.style.display = "none";
        // document.body.appendChild(elemIF);
        window.open(url);
      },
      // 添加消息列表内容，UI顯示
      addMsgList(name, content) {
        this.msgList.push({
          name: name,
          content: content
        });
        if (this.activeTabs !== "2") {
          this.newMsg = true;
        }
      },
      // 切換tabs的事件
      tabClick(tab) {
        if (tab.name === "2") {
          this.newMsg = false;
        } else if (tab.name === "3") {
          this.newFile = false;
        }
      },

      // 查询文件列表
      queryFiles() {
        let url = "/file/queryfiles/?room=";
        let params = {};
        this.axios.hGet(url + this.roomId, params, response => {
          console.log(response);
          if (response.data.length !== 0) {
            this.fileList = response.data;
          }
        });
      },
      // 删除文件
      deleteFile(fileId) {
        let url = "/file/delete/";
        let params = {};
        this.axios.hPost(url + fileId, params, response => {
          console.log(response);
          if (response.status === 200) {
            this.$message.success("文件删除成功");
            this.queryFiles();
          }
        });
      },
      //上传文件
      uploadFile() {
        let _this = this;
        let url = "/file/preview";
        let params = new FormData();
        console.log(this.uploadFiles);
        console.log(this.uploadFiles[0]);
        params.append("file", this.uploadFiles[0].raw);
        params.append("userName", this.name);
        params.append("room", this.roomId);

        this.axios.formPost(url, params, response => {
          this.$refs.upload.clearFiles();
          if (response.status === 200) {
            console.log(response);
            this.$message.success("文件上传成功");
            let content = {
              data: {
                fileHtml: response.data.htmlUrl,
                fileName: _this.uploadFiles[0].name,
                fileSize: _this.uploadFiles[0].size,
                fileType: response.data.type,
                fileUrl: response.data.loadUrl
              },
              operation: "file"
            };
            this.sendUploadFileMsg(content);
            this.queryFiles();
          } else {
            this.$message.error(response.msg);
          }
        });
      },
      // 上传文件相关
      handleUploadChange(file, fileList) {
        console.log(file);
        console.log(fileList);
        this.uploadFiles = fileList;
        this.uploadFileName = file.name;
        this.uploadFile();
      },
      // 全景展开
      switchVrDeveloped() {
        this.isVrDeveloped = !this.isVrDeveloped;
        let _this = this;
        if (this.isVrDeveloped) {
          console.log(THREE);
          window.THREE = THREE; // 重要，不设置则会报THREE未定义错误！！！！！！
          let videoTag = document.getElementById(_this.videoList[0].video);
          container = document.getElementById("container-vr");
          renderer = new THREE.WebGLRenderer();
          container.appendChild(renderer.domElement);
          let scene = new THREE.Scene();
          let geometry = new THREE.SphereBufferGeometry(200, 60, 40);
          geometry.scale(-1, 1, 1);
          let texture = new THREE.VideoTexture(videoTag);

          let material = new THREE.MeshBasicMaterial({
            map: texture
          });
          let mesh = new THREE.Mesh(geometry, material);
          scene.add(mesh);
          vr = new VR(scene, renderer, container);

          vr.init(function() {});
        } else {
          container.removeChild(renderer.domElement);
          renderer.dispose();
          renderer.forceContextLoss();
          renderer.context = null;
          renderer.domElement = null;
          renderer = null;
        }
      },

      // 工具
      checkIsNumber(str) {
        let reg = /^[0-9]*$/;
        if (reg.test(str)) {
          return true;
        }
        return false;
      },
      getArray(min, max) {
        let arr = new Array();
        let i = parseInt(min);
        while (i < max) {
          arr.push(i);
          i++;
        }
        return arr;
      }
    },
    watch: {
      confMemberNum: function() {
        console.log(this.videoList);
        console.log(this.confMemberNum);
        this.dynamicLayout();
      }
    }
  };
</script>

<style scoped>
  .videoShow1 {
    /*display: inline-block;*/
    /*border: 1px solid #fff;*/
    /*height: 97px;*/
  }

  .btnShow {
    /*display: inline-block;*/
    /*width: 80px;*/
    /*margin-right: 3px;*/
    height: 40px;
  }

  .videoView1 {
    width: 100vw;
    height: calc(100vh - 80px);
    background-color: #000000;
    /*border: 1px solid #000;*/
  }

  .videoView2 {
    width: 100vw;
    height: calc(100vh - 80px);
    background-color: #000000;
    /*border: 1px solid #000;*/
  }

  .videoDiv {
    display: inline-block;
    border: 1px solid #000000;
    line-height: 0;
  }

  .btnListClass {
    width: 100%;
    background-color: #000;
    opacity: 0.5;
    height: 40px;
    margin-top: -40px;
  }

  .videoExtra1 {
    height: 30px;
    margin-top: -37px;
    font-size: 16px;
    line-height: 30px;
    color: #fff;
    background-color: #313131;
    opacity: 0.5;
    /*bottom: 40px;*/
  }

  .videoExtra {
    height: 40px;
    margin-top: -40px;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    /*border-left: 1px solid #ffffff;*/
    /*border-right: 2px solid #ffffff;*/
    background-color: #313131;
    opacity: 0.5;
    /*bottom: 40px;*/
  }

  .videoAlt {
    height: 100%;
    width: 100%;
    background-color: #131313;
    /*background-image: url("../../assets/videoStream/wutou.png");*/
    background-size: 100% 100%;
    /*background-repeat: no-repeat;*/
  }

  /*菜单*/
  .btn-quitConf {
    border: none;
    height: 40px;
    width: 40px;
    background: url("../../assets/videoStream/quit.png") no-repeat;
    background-size: 100% 100%;
  }

  /*.btn-quitConf:hover {*/
  /*background: url("../../assets/videoStream/sp_guaduan1.png") no-repeat;*/
  /*background-size: 100% 100%;*/
  /*}*/

  .btn-switchLayout {
    border: none;
    margin-top: 7.5px;
    height: 25px;
    width: 31px;
    background-color: transparent;
    /*background-image: url("../../assets/videoStream/yida1.png");*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .btn-publish {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 27px;
    background-color: transparent;
    /*background-image: url("../../assets/videoStream/yida1.png");*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .btn-mike {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 16px;
    background-color: transparent;
    /*background-image: url("../../assets/videoStream/yida1.png");*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .btn-shareScreen {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 22px;
    background-color: transparent;
    /*background-image: url("../../assets/videoStream/yida1.png");*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .btn-message {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 22px;
    background-color: transparent;
    background-image: url("../../assets/videoStream/sp_xiaoxi.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .btn-message1 {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 22px;
    background-color: transparent;
    background-image: url("../../assets/videoStream/sp_xiaoxi1.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .btn-file {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 22px;
    background-color: transparent;
    background-image: url("../../assets/videoStream/sp_wenjian.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .btn-file1 {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 22px;
    background-color: transparent;
    background-image: url("../../assets/videoStream/sp_wenjain.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .btn-upload {
    margin-top: 12px;
    border: none;
    height: 15px;
    width: 15px;
    background: url("../../assets/videoStream/sp_shangchaun.png") no-repeat;
    background-size: 100% 100%;
  }
  .btn-down {
    margin-top: 12px;
    border: none;
    height: 15px;
    width: 15px;
    background: url("../../assets/videoStream/sp_xiazai.png") no-repeat;
    background-size: 100% 100%;
  }
  .btn-bitrate {
    border: none;
    background-image: url("../../assets/videoStream/huahzi.png");
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 10px;
    height: 20px;
    width: 28px;
  }
  .btn-vr {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 20px;
    background: url("../../assets/videoStream/quanjing1.png") no-repeat;
    background-size: 100% 100%;
  }
  .btn-vr1 {
    border: none;
    margin-top: 10px;
    height: 20px;
    width: 20px;
    background: url("../../assets/videoStream/quanjing.png") no-repeat;
    background-size: 100% 100%;
  }
  .showSwitchBitClass {
    position: absolute;
    height: 115px;
    width: 100px;
    bottom: 40px;
    left: -20px;
    z-index: 2;
    background: url("../../assets/videoStream/huazhikuang.png") no-repeat;
    background-size: 100% 100%;
  }

  .radioClass {
    color: #fff;
    height: 25px;
  }
  .msg-drawer {
    color: #fff;
  }
  /*右侧*/
  .msgContentClass {
    max-width: 30vw;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    display: inline-block;
  }
  .input-msg {
    border: none;
    color: #fff;
    background: url("../../assets/videoStream/sp_gongnnengdi.png") no-repeat;
    background-size: 100% 100%;
  }
  .btn-msg {
    width: 20px;
    height: 20px;
    border: none;
    background: url("../../assets/videoStream/sp_fasong.png") no-repeat;
    background-size: 100% 100%;
  }

  .msgContentList {
    overflow-y: auto;
  }
  .div-videoList {
    width: 100%;
    text-align: center;
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: #000;
    border-radius: 5px;
    opacity: 0.7;
  }

  .fileListClass {
    padding: 5px 0 20px 0;
    overflow-y: auto;
    height: calc(100vh - 50px);
  }
  .icon-user-left {
    height: 30px;
    width: 20vw;
    padding-left: 33px;
    background: url("../../assets/videoStream/xiaotou.png") no-repeat;
    background-size: 24px 24px;
    background-position: 0 3px;
  }
  .icon-user-right {
    height: 30px;
    width: 20vw;
    padding-right: 33px;
    background: url("../../assets/videoStream/xiaotou.png") no-repeat;
    background-size: 24px 24px;
    background-position: calc(20vw - 30px) 3px;
    text-align: right;
  }

  div.el-icon-new:before {
    margin-top: -20px;
    display: inline-block;
    content: "";
    width: 15px;
    background: url("../../assets/videoStream/new.png") no-repeat;
    background-position: 0 0;
    background-size: 20px 20px;
    height: 23px;
  }
</style>
<style>
  .el-drawer__open .el-drawer.ltr {
    background: url("../../assets/videoStream/touming.png");
  }
</style>
